<!--  -->
<template>
  <div class="app-column-container">
    <com-map
      ref="comMap"
      :domID="domID"
      :initFlag="initFlag"
      :mapConfigName.sync="mapConfigName"
      @onMapLoaded="onMapLoaded"
    ></com-map>
    <!-- <template *ngIf="handles.button">
        <div class="map-left-button" [ngClass]="{'map-left-button-select': flag}">
            <div class="map-left-button-icon" title="行政图层">
                <div class="map-label" (click)="flag = !flag">
                    <i class="fa fa-bars"></i>
                </div>
            </div>
            <div class="map-left-button-items">
                <div class="item">
                    <div class="map-label" (click)="getGrids(4)" [ngStyle]="{'color': selectItem === 4 ? '#00a0e9' : '#333'}">县</div>
                </div>
                <div class="item">
                    <div class="map-label" (click)="getGrids(5)" [ngStyle]="{'color': selectItem === 5 ? '#00a0e9' : '#333'}">街镇</div>
                </div>
                <div class="item" (click)="getGrids(6)" [ngStyle]="{'color': selectItem === 6 ? '#00a0e9' : '#333'}">
                    <div class="map-label">社区(村)</div>
                </div>
                <div class="item" (click)="getGrids(7)" [ngStyle]="{'color': selectItem === 7 ? '#00a0e9' : '#333'}">
                    <div class="map-label">单元网格</div>
                </div>
            </div>
        </div>
    </template> -->

    <!-- <template *ngIf="handles.search">
    <div class="map-search">
        <p-autoComplete [suggestions]="suggestions" (completeMethod)="search($event)" [(ngModel)]="suggestion" placeholder="请输入地点" [minLength]="1"
                        field="name" delay="500" [readonly]="isEdit" (onSelect)="selectSuggestion()" [style]="{'width':'300px'}" [inputStyle]="{'width':'300px','top':'0px'}">
        </p-autoComplete>
    </div>
    </template> -->

    <template v-if="true">
      <div v-if="!show" class="map-tools">
        <template v-for="(tool, index) of tools">
          <div class="tool-body" :key='index' :title="tool.title" :class="{'tool-body-select': tool.select}"
               v-htm="tool.icon" @click="change(tool, i)">
          </div>
        </template>
      </div>

      <div v-if="show" class="map-tools tool-color">
        <div class="tool-body"  :title="'展开'" @click="change(anotherTool, null)">
          <svg class="tool-icon" aria-hidden="true">
            <use xlink:href="#iconzhankai"></use>
          </svg>
        </div>
      </div>
    </template>
  </div>
</template>

<script lang='ts' src='./index.ts'></script>
<style lang='scss' scoped>
@import "./_index.scss";
</style>